<template>
    <div class="cont">
        <van-popup v-model="show" close-on-popstate @close="close">
            <div v-if="type == 3" class="popup-login text-center">
                <div class="popup-login-head">
                    <div class="font-18 color-white">使用手机微信扫码登录</div>
                    <div class="QRcode" :class="qrcodeImg ? 'bg-white' : ''">
                        <img v-if="qrcodeImg" v-lazy="qrcodeImg" alt="">
                    </div>
                    <div @click="refresh" class="flex align-center justify-center font-12 color-white">
                        <img class="icon-refresh" src="https://h5.dhcc.wang/newprogram/wxRobot/nav_refresh.png" alt="">
                        <span>更新二维码</span>
                    </div>
                </div>
                <div class="popup-login-body p-12 flex flex-direction">
                    <span class="text-bold">登录提示：</span>
                    <span class="text">1.将二维码截图后发送其他手机或者电脑，再使用手机微信扫一扫登录</span>
                    <span class="text">2.直接在微信内长按图片识别无法登录成功</span>
                    <span class="text">3.二维码有效期3分钟</span>
                </div>
            </div>
            <div v-else-if="type == 7" class="popup-login text-center">
                <div class="popup-login-head">
                    <div class="font-18 color-white">
                        <span>已扫描</span>
                    </div>
                    <div class="wx-avatar">
                        <img v-lazy="scanInfo.notify.headImgUrl" alt="">
                        <div class="loading">
                            <van-loading type="spinner" color="#fff" />
                        </div>
                    </div>
                </div>
                <div class="popup-login-body p-12 flex flex-direction justify-center align-center">
                    <span class="color-9 van-ellipsis">{{ scanInfo.notify.nickName }}</span>
                </div>
            </div>
            <!-- 未购买登录 -->
            <div v-else-if="type == 9" class="popup-login text-center p-20">
                <div class="font-18 text-bold">
                    <span>温馨提示</span>
                </div>
                <div class="popup-login-body p-12 flex flex-direction justify-center align-center">
                    你还没有开通，暂无法登录，请先去开通再来登录
                </div>
                <div class="m-t-10 flex m-l-10">
                    <div @click="close" class="btn-group-item bg-grey color-6">
                        等会再来
                    </div>
                    <div @click="confrim" class="btn-group-item bg-green color-white m-r-10">
                        立即开通
                    </div>
                </div>
            </div>
            <div v-else-if="type == 10" class="text-center p-20">
                <div class="font-18 text-bold m-b-20">
                    <span>参考下方图示</span>
                </div>
                <img class="imgs" src="https://img20.360buyimg.com/ling/jfs/t1/234698/22/11537/416450/659b9184Ff60dbfad/3594155c89d81069.gif" alt="">
                <div class="m-t-10">
                    <div @click="close" class="btn-group-item bg-green color-white" style="margin-right: 0;">
                        我知道了
                    </div>
                </div>
            </div>
            <div v-else-if="type == 11" class="popup-login text-center p-20">
                <div class="font-18 text-bold">
                    <span>温馨提示</span>
                </div>
                <div class="popup-login-body p-12 flex flex-direction justify-center align-center">
                    当前APP版本过低暂无法使用
                </div>
                <div class="m-t-10 flex m-l-10">
                    <div @click="close" class="btn-group-item bg-green color-white" style="margin-right: 0;">
                        我知道了
                    </div>
                </div>
            </div>
            <div v-else-if="type == 12" class="popup-login text-center p-20">
                <div class="font-18 text-bold">
                    <span>温馨提示</span>
                </div>
                <div class="popup-login-body p-12">
                    群<span class="color-red">{{groupInfo.nick_name}}</span>已经被微信用户
                    <div class="flex align-center m-r-5 font-13" style="display: inline-flex">
                        <img :src="scanInfo.small_head_img_url" class="m-r-5 radius8" width="16"/>
                        <span class="color-red">{{scanInfo.nick_name}}</span>
                    </div>绑定，系统暂不支持该群重复绑定哦~
                    <br><br>
                    如该微信号为您所有，可截屏后联系平台客服，协助解绑原微信号后再添加群。
                </div>
                <div class="m-t-10 flex m-l-10">
                    <div @click="close" class="btn-group-item bg-green color-white" style="margin-right: 0;">
                        我知道了
                    </div>
                </div>
            </div>
            <div v-else class="popup-cont text-center">
                <div class="popup-cont-title font-16 text-bold">
                    <span v-if="type == 1">前往开通{{ config.cw_cfg.cw_name }}</span>
                    <span v-else>提示</span>
                </div>
                <div class="popup-cont-main m-tb-20">
                    <span v-if="type == 0" class="color-9">是否确认退出登录？</span>
                    <span v-if="type == 1" class="color-9">您当前暂无使用权限，请先开通{{ config.cw_cfg.cw_name }}</span>
                    <div v-if="type == 2" class="flex flex-direction text-left font-13 color-9 tutorials">
                        <!-- <span>1.更换微信号登录后需要重新挂机3天；</span> -->
                        <span>更换账号可能会导致账号登录不稳定，请谨慎操作！</span>
                    </div>
                    <span v-if="type == 4" class="color-9">登录请求已发送，请在对应手机版微信点击确认登录</span>
                </div>
                <div class="btn-group flex align-center">
                    <span @click="close" class="btn-group-item bg-grey color-6">
                        <em v-if="type == 1">我再想想</em>
                        <em v-else>取消</em>
                    </span>
                    <span @click="confrim" class="btn-group-item bg-green color-white">
                        <em v-if="type == 1">立即开通</em>
                        <em v-else>确定</em>
                    </span>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Popup, Loading } from 'vant'
export default {
    components: {
        [Popup.name]: Popup,
        [Loading.name]: Loading
    },
    props: {
        popupVisible: {
            type: Boolean,
            default: false
        },
        type: {
            type: Number,  //0=退出登录，1=未开通，2=换号登录，3=登录，4=唤醒微信登录，5=登录失败重试，6=指令绑定群，7=微信已扫描,9未开通时登录，10查看教程,11版本过低提示，12绑定发单群重复提示
            default: 0
        },
        qrcodeImg: {
            type: String,
            default: ''
        },
        scanInfo: { // 已扫描微信会员信息
            type: Object,
            default: () => {
                return {}
            }
        },
        groupInfo:{
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data () {
        return {
            show: this.popupVisible,
            config: this.$DB.get('robotCfg')
        }
    },
    methods: {
        cancel () { },
        confrim () {
            this.$emit('confrim', this.type)
        },
        close () {
            this.$emit('close', this.type)
        },
        refresh () {
            this.$emit('confrim', 200)
        }
    }
}
</script>
<style lang="less" scoped>
em {
    font-style: normal;
}

.cont {
    /deep/ .van-popup {
        border-radius: 10px;
    }
}

.popup-login {
    width: 280px;

    &-head {
        padding: 25px 0px 10px;
        background: url(https://img.huajuanyun.com/202009/20201219155127.png) no-repeat;
        background-size: 100% 100%;

        .QRcode {
            margin: 20px auto 10px;
            width: 150px;
            height: 150px;
            padding: 10px;
            border-radius: 6px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }

        .wx-avatar {
            margin: 30px auto;
            width: 120px;
            height: 120px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }

            .loading {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: translate(-50%, -50%);
                background: rgba(0, 0, 0, .4);
                border-radius: 5px;
            }
        }

        .icon-refresh {
            width: 14px;
            height: 14px;
            margin-right: 3px;
        }
    }

    &-body {
        text-align: left;

        .text {
            margin-top: 5px;
            font-size: 12px;
            color: #999;
        }
    }
}

.popup-cont {
    padding: 15px 18px;
    width: 65vw;

    &-main {
        .tutorials {
            span {
                line-height: 22px;
            }
        }

        .area-field {
            margin-top: 10px;
            padding: 10px;
            border-radius: 2px;
            color: #666;
            font-size: 13px;
            background: #F8F8F8;
        }
    }
}

.btn-group {
    padding: 0 15px;

    &-item {
        flex: 1;
        padding: 8px 0;
        font-size: 14px;
        border-radius: 4px;

        &:nth-of-type(1) {
            margin-right: 15px;
        }
    }
}

.imgs {
    width: 70vw;
}
</style>